<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>
    </ul>
    <p class="color-picker">123</p>
    <script>
        /*      var list = document.querySelectorAll("li");
        for (var i = i = 0, len = list.length; i < len; i++) {
            list[i].onclick = function(e) {
                var t = e.target;
                var c = t.style.backgroundColor;
                var p = document.getElementsByClassName("color-picker")[0]
                p.innerHTML = c;
                p.style.color = c;
            }
        } */
        var list = document.getElementsByTagName("li");
        var p = document.getElementsByClassName("color-picker")[0];
        console.log(p);
        function color(e) {
            p.innerHTML = e.target.style.backgroundColor;
            p.style.color = e.target.style.backgroundColor;
        }
        for (var i = 0; i < list.length; i++) {
            list[i].addEventListener("click", color);
        }
    </script>
</body>
</html>